<template>
  <div class="dashboard-container">
    <MkPanel title="申请单闭环图">
      <div style="width: 100%; height: 300px; border: 1px dashed #ccc;">
        申请单闭环图
      </div>
    </MkPanel>

    <!-- 血型复核面板 -->
    <MkPanel title="血型复核">
      <template #header>
        血型复核
        <MkButtonAdd v-if="!xueXingFuHeInfo" @click="add('血型复核')" />
      </template>
      <div>
        <el-card class="card" v-if="xueXingFuHeInfo">
          <div class="card-content">
            <p>复核时间： {{ timeFormat(xueXingFuHeInfo.createTime) }}</p>
            <p>
              <span> ABO复核结果：{{ xueXingFuHeInfo.aboFuHeJieGuo }}</span>
            </p>
            <p><span> RhD复核结果：{{ xueXingFuHeInfo.rhDFuHeJieGuo }} </span></p>
            <p>抗筛结果：{{ xueXingFuHeInfo.kangShaiJieGuo }}</p>
          </div>
          <div style="text-align: right;">
            <el-button type="primary" @click="check('xxfh', xueXingFuHeInfo.id)">查看</el-button>
          </div>
        </el-card>
      </div>
    </MkPanel>
    <MkPanel title="交叉配血">
      <template #header>
        交叉配血
        <MkButtonAdd @click="add('交叉配血')" />
      </template>
      <div class="card-list">
        <el-card v-for="(item, index) in peiXueList" :key="index" class="card">
          <div class="card-content">
            <p>配血单号：{{ item.id }}</p>
            <p>配血时间：{{ timeFormat(item.createTime) }}</p>
            <p>配血类型：{{ item.peiXingLeiXing }}</p>
            <p>单据状态：{{ item.danJuZhuangTai }}</p>
          </div>
          <div style="text-align: right;">
            <el-button type="primary" @click="check('jcpx', item.id)">查看</el-button>

          </div>
        </el-card>
      </div>
    </MkPanel>
    <MkPanel title="临床发血">
      <template #header>
        临床发血
        <MkButtonAdd @click="add('临床发血')" />
      </template>
      <div class="card-list">
        <el-card v-for="(item, index) in faXueList" :key="index" class="card">
          <div class="card-content">
            <p>发血单号：{{ item.id }}</p>
            <p>发血时间：{{ timeFormat(item.createTime) }}</p>
            <p>单据类型：{{ item.danJuLeiXing }}</p>
            <p>单据状态：{{ item.danJuZhuangTai }}</p>
          </div>
          <div style="text-align: right;">
            <el-button type="primary" @click="check('lcfx', item.id)">查看</el-button>
          </div>
        </el-card>
      </div>
    </MkPanel>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue';
import { PeiFaXueInfoOutput } from '/@/api/tra/TraShenQing';
import { timeFormat } from '/@/utils';
const props = defineProps({
  peiFaXueInfo: {
    type: Object as PropType<PeiFaXueInfoOutput>,
    default: {}
  }
})
// 血型复核信息
const xueXingFuHeInfo = computed(() => {
  return props.peiFaXueInfo.fuHe
})
// 配血信息
const peiXueList = computed(() => {
  return props.peiFaXueInfo.peiXueList
})
// 发血信息
const faXueList = computed(() => {
  return props.peiFaXueInfo.faXueList
})

const emits = defineEmits(['add', 'check'])
const add = (type: string) => {
  emits('add', type)
}
const check = (type: string, id: string) => {
  const key = `${type}_${id}`
  emits('check', key)
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 10px 15px;
  height: 100%;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.card {
  padding: 10px;
  max-width: 320px;
}

.card-content p {
  color: #666;
}
</style>